<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引用Vue -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/productList.css" />
<link rel="stylesheet" type="text/css" href="css/goodpicture.css" />
<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css"
	rel="stylesheet" type="text/css">

<script type="text/javascript">
	$(function() {
		/*点击图片列表*/
		$(".picturelist").click(function(){
			$(".portfolioContainer").css("display","block"),
			$(".picturelist span").css("color","#5fbeaa"),
			$(".simple span").css("color","#505461"),
			$(".fixed-table-container").css("display","none");
		})
		/*点击普通列表*/
		$(".simple").click(function(){
			$(".fixed-table-container").css("display","block"),
			$(".simple span").css("color","#5fbeaa"),
			$(".picturelist span").css("color","#505461"),
			$(".portfolioContainer").css("display","none");
		});
		
		$(".easyui-linkbutton").click(function downloadfile(){
	        window.location.href="/export";
	    })
		
	});
	</script>
</head>
<body class="fixed-left">
	<div class="enlarged forced" id="wrapper">

		<div class="content-page crm" style="margin: 0; padding: 0">
			<div class="content" style="margin: 0; padding: 0">
				<div class="container-fluid">
					<!-- <div class="row"> -->
					<div id="idid" class="col-sm-12">
						<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
						<!----------------筛选、查询input代码开始--------------------> <!-- 第二种搜索框 -->
						<div id="search" style="margin-top: 10px;">
							<div style="height: 50px;" id="app">
								<a class="btn" style="float: left;"><i class="fa fa-cubes"></i></a>
								<el-select v-model="ruleForm.selects"
									style="width:120px;float:left;" slot="prepend" clearable
									placeholder="全部数据"> <el-option label="正常"
									value="506"></el-option> <el-option label="停售" value="507"></el-option>
								</el-select>
								<el-input placeholder="产品分类" v-model="ruleForm.cat_name"
									style="width:150px;float:left;margin-left:20px;"
									class="input-with-select"> </el-input>
								<a class="btn btn-d" title="分类维护" href="/querycategory"
									style="float: left; margin-left: 10px;"><i
									class="fa fa-cog"></i></a>
								<el-input placeholder="产品名称" v-model="ruleForm.input"
									style="width:200px;float:left;margin-left:20px;"
									class="input-with-select"> </el-input>

								<el-button slot="append" icon="el-icon-search"
									@click="submitForm('ruleForm')"></el-button>
								<el-button type="primary" @click="moreQuery()">高级查询</el-button>
							</div>

						</div>
						<el-dialog :visible.sync="centerDialogVisible2" width="750px"
							center>
						<div id="goodapp" class="app">
							<div class="title" style="width: 100%; text-align: center">
								<h3>高级查询</h3>
							</div>
							<el-form ref="goodForm" :model="goodForm" :rules="rules"
								label-width="100px"> <el-row> <el-col
								:span='12'> <el-form-item prop="gname" label="产品名称：">
							<el-autocomplete v-model="goodForm.gname" class="inline-input"
								:fetch-suggestions="querySearch" :trigger-on-focus="false"
								@select="handleSelect"> <template
								slot-scope="{ item }">
							<div class="name">{{ item.goo_name }}</div>
							</template> </el-autocomplete> </el-form-item> </el-col> <el-col :span='12'> <el-form-item label="产品类别："
								prop="catid" style="width:85%"> <el-input
								v-model="goodForm.catid"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col
								:span='12'> <el-form-item prop="gid" label="产品编号："
								style="width:82%;"> <el-input
								v-model="goodForm.gid"></el-input> </el-form-item> </el-col> <el-col :span='12'>
							<el-form-item label="销售状态：" prop="pstatus"> <el-select
								placeholder="未选" v-model="goodForm.gstatus"> <el-option
								label="正常" :value="506"></el-option> <el-option label="停售"
								:value="507"></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-form-item label="价格区间：">
							<el-col :span="8"> <el-form-item prop="xprice">
							<el-input v-model="goodForm.xprice"></el-input> </el-form-item> </el-col> <el-col
								:span="0.5"> <el-form-item> - </el-form-item> </el-col> <el-col
								:span="8"> <el-form-item prop="dprice">
							<el-input v-model="goodForm.dprice"></el-input> </el-form-item> </el-col> </el-form-item> <el-form-item
								label="库存量："> <el-col :span="8"> <el-form-item
								prop="xnum"> <el-input v-model="goodForm.xnum"></el-input>
							</el-form-item> </el-col> <el-col :span="0.5"> <el-form-item> - </el-form-item>
							</el-col> <el-col :span="8"> <el-form-item prop="dnum">
							<el-input v-model="goodForm.dnum"></el-input> </el-form-item> </el-col> </el-form-item> </el-form>
							<div class="title">
								<el-button type="primary" style="margin-left: 300px;"
									@click="onSubmit('goodForm')">查询</el-button>
							</div>

						</div>

						</el-dialog> <!----------------列表-------------------->
						<div id="qlist" style="z-index: 0">
							<div class="row m-t-15 f-s-12" style="height: 35px;">
								<!-- 新建按鈕 -->
								<div class="col-sm-6 text-right add"
									style="width: 120px; float: right;">
									<el-button class="btn btn-white " :plain="true"
										@click="showDialog()"> <i
										class="el-icon-circle-plus"></i>新建 </el-button>
									<el-dialog :visible.sync="centerDialogVisible" width="900px"
										center> <iframe src="/goodAdd" width="100%"
										frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = 
										this.contentWindow.document.body.scrollWidth"></iframe>
									</el-dialog>
								</div>
							</div>
							<!-- BEGIN pichide -->

							<ul class="nav nav-tabs" style="width: 300px;">
								<li class="active"><a aria-expanded="false" class="simple"
									data-toggle="tab"> <span style="cursor: pointer">普通列表</span></a></li>
								<li><a aria-expanded="true" class="picturelist aaa"
									data-toggle="tab"><span> 图片列表 </span></a></li>
							</ul>
							<!-- END pichide -->

							<div class="tab-content p-0">
								<div class="bootstrap-table m-t-10">
									<!-- 表格列表  start -->
									<div class="fixed-table-container overflow-x-auto"
										style="display: block">
										<table class="table table-bordered table-hover table-z"
											id="qlist_table">
											<thead>
												<tr>
													<th class="bs-checkbox" style="width: 36px;">
														<div class="th-inner">
															<input name="selcon"
																onclick='setQlistChk("formedit_qlist",this.checked);'
																type="checkbox" data-parsley-multiple="selcon">
														</div>
														<div class="fht-cell"></div>
													</th>

													<th class="th-inner">
														<p>
															<a class="na"
																href="JavaScript:qlist_argv_orderf='id'; qlist_argv_orderv=0;qlist_load();"
																set-lan="html:ID">ID</a>
														</p>
													</th>
													<th class="th-inner">
														<p align="left">
															<a class="na"
																href="JavaScript:qlist_argv_orderf='pro_name'; qlist_argv_orderv=0;qlist_load();"
																set-lan="html:品名">品名</a>
														</p>
													</th>
													<th class="th-inner">
														<p align="left">
															<a class="na"
																href="JavaScript:qlist_argv_orderf='pic'; qlist_argv_orderv=0;qlist_load();"
																set-lan="html:产品图片">产品图片</a>
														</p>
													</th>
													<th class="th-inner">
														<p align="left">
															<a class="na"
																href="JavaScript:qlist_argv_orderf='class'; qlist_argv_orderv=0;qlist_load();"
																set-lan="html:保质期">保质期</a>
														</p>
													</th>
													<th class="th-inner">
														<p align="left">
															<a class="na"
																href="JavaScript:qlist_argv_orderf='class'; qlist_argv_orderv=0;qlist_load();"
																set-lan="html:分类">分类</a>
														</p>
													</th>
													<th class="th-inner">
														<p align="right">
															<a class="na"
																href="JavaScript:qlist_argv_orderf='price'; qlist_argv_orderv=0;qlist_load();"
																set-lan="html:价格">价格</a>
														</p>
													</th>
													<th class="th-inner">
														<p align="center">
															<a class="na"
																href="JavaScript:qlist_argv_orderf='status'; qlist_argv_orderv=0;qlist_load();"
																set-lan="html:单位">单位</a>
														</p>
													</th>
													<th class="th-inner">
														<p align="center">
															<a class="na"
																href="JavaScript:qlist_argv_orderf='status'; qlist_argv_orderv=0;qlist_load();"
																set-lan="html:状态">状态</a>
														</p>
													</th>
													<th class="th-inner">
														<p>
															<a class="na" style="color: black; margin-left: 10px;">操作</a>
														</p>
													</th>
												</tr>
											</thead>
											<tbody class="bg-white">

												<tr v-for="(list,i) in tableData" v-model="tableData">
													<td><input name="sel_id[]" type="checkbox" value="106"
														data-parsley-multiple="sel_id"></td>
													<td style="width: 60px">
														<p>{{list.goo_id}}</p>
													</td>
													<td style="width: 500px">
														<p align="left">
															<a id="qlist_F106" :href="'/productdesc?id='+list.goo_id"><i
																class="fa fa-arrow-circle-right text-blue m-r-5"></i>{{list.goo_name}}</a>
														</p>
													</td>
													<td>
														<p align="left">
															<img :src="list.goo_img"
																style="width: 50px; height: 50px;">
														</p>
													</td>
													<td>
														<p align="left">{{list.ddtime}}个月</p>
													</td>
													<td>
														<p align="left">{{list.cat_name}}</p>
													</td>
													<td>
														<p align="right">
															<span style="white-space: nowrap"><span
																style="font-size: 9pt; font-weight: normal;">￥</span>{{list.goo_price}}</span>
														</p>
													</td>
													<td>
														<p align="center">{{list.gunit }}</p>
													</td>
													<td>
														<p align="center">{{list.status }}</p>
													</td>
													<td width="1%" nowrap=""><a title="删除"
														data-original-title="删除" data-placement="bottom"
														@click="delgood(list.goo_id)"><i
															class="el-icon-delete m-r-5"></i></a>&nbsp; <a title="编辑"
														data-original-title="编辑" data-placement="bottom"
														@click="editgood(list.goo_id)"><i
															class="m-r-5 el-icon-edit"></i></a>&nbsp;
														</div></td>
												</tr>
											</tbody>
										</table>
										<el-dialog title="提示" :visible.sync="dialogVisible"
											width="30%"> <span>您确认要删除此记录吗？</span> <span
											slot="footer" class="dialog-footer"> <el-button
												@click="dialogVisible = false">取 消</el-button> <el-button
												type="primary" @click="update(goo_id)">确 定</el-button>

										</span> </el-dialog>

									</div>
									<!--表格列表end  -->
									<!--图片列表 start  -->
									<div class="portfolioContainer m-b-15" style="display: none">
										<div class="col-sm-6 col-lg-3 col-md-5ths"
											style="width: 1200px">
											<div class="product-list-box thumb"
												style="width: 216px; float: left; margin: 10px; height: 311px"
												v-for="(list,i) in tableData" v-model="tableData">
												<a :href="'/productdesc?id='+list.goo_id"><img
													class="thumb-img" :src="list.goo_img"></a>
												<div class="product-action">
													<a class="btn btn-white waves-effect"
														data-original-title="编辑" data-toggle="tooltip"
														data-placement="bottom"><i class="fa fa-pencil"></i></a>&nbsp;
												</div>

												<div class="detail">
													<p class="m-t-0 m-b-5">
														<a class="data" id="qlist_F107"
															:href="'/productdesc?id='+list.goo_id">{{list.goo_name}}</a>
													</p>
												</div>
											</div>
										</div>
									</div>
									<!--图片列表 end  -->
								</div>
								<div class="row m-t-10">
									<div class="col-sm-3">
										<el-upload class="upload-demo" ref="upload"
											action="/goodimport" :on-success="handleAvatarSuccess"
											:auto-upload="false"> <el-button slot="trigger"
											size="small" type="primary">
										<i class="icon-span-filestyle"></i>选择excel文件</el-button> <el-button
											style="margin-left: 10px;" size="small" type="success"
											@click="submitUpload">上传到服务器</el-button> </el-upload>
									</div>
									<div class="col-sm-7">
										<el-pagination @size-change="handleSizeChange"
											@current-change="handleCurrentChange"
											:current-page="ruleForm.currentPage"
											:page-sizes="[10, 20, 30, 40]" :page-size="ruleForm.pagesize"
											layout="total, prev, pager, next, jumper"
											:total="ruleForm.totalCount"> </el-pagination>
									</div>
									<div class="col-sm-2 text-right">
										<!-- BEGIN qqhide -->
										<a title="打印列表" class="btn btn-white btn-custom waves-light"
											href="/system/runmod_print.xt?where=&amp;bwhere=&amp;page=&amp;orderf=&amp;orderv=&amp;pn=&amp;customer_phone_show=0&amp;sid=95&amp;ssn=eqtbhnjoofkukakh9srptfb8c5&amp;ccn=d002&amp;cr=3f45cc49f1d751bb552284054948516d&amp;ma=caec64c353ff1fff4813f3df05349b00&amp;scname=memday&amp;comname=qlist&amp;modcr=d0916b6105e2b6463742e2befb050fdc&amp;customer_phone_show=0&amp;cv=,search,qlist,&amp;qlist_print=1"
											target="_blank" data-original-title="打印列表"
											data-toggle="tooltip" data-placement="bottom"> <i
											class="el-icon-printer"></i></a> <a title="导出Excel权限"
											class="btn btn-white btn-custom  waves-effect waves-light"
											href="/setup/setup.xt?func=s_table&amp;dt=memday"
											target="_blank" data-toggle="tooltip" data-placement="bottom"><i
											class="el-icon-setting"></i></a>&nbsp; <a
											class="btn btn-white easyui-linkbutton"
											onclick="downloadfile();" title="导出Excel格式数据"> <i
											class="el-icon-document"></i>
										</a>
										<!-- END qqhide -->
									</div>
								</div>
							</div>
							<!--UTF8-->
						</div>
						<!----------------统计--------------------> </el-form>
						<el-dialog :visible.sync="centerDialogVisible4" width="900px"
							center> <iframe :src="FrameSrc" width="100%"
							onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = this.contentWindow.document.body.scrollWidth"
							frameborder="0" scrolling="no"></iframe> </el-dialog>
					</div>

					<script>
				var vm = new Vue({
					el: "#idid",
					data() {
						return {
							texts: "",
							centerDialogVisible: false,
							centerDialogVisible2: false,
							centerDialogVisible4:false,
							dialogVisible:false,
							 FrameSrc:"",
							//表格当前页数据
			                tableData: [],
							ruleForm: {
								//类别名
								cat_name:'',
								//搜索框
								input: '',
								//下拉条件按钮
								selects: '',
								 //默认每页数据量
				                pagesize: 10,
				              //当前页码
				                currentPage: 1,
				                //默认数据总数
				                totalCount: '',
				               
						        },
						        goodForm: {
									gname: '',
									catid: '',
									gid: '',
									gstatus: '',
									xprice: '',
									dprice: '',
									xnum:'',
									dnum:'',
									//默认每页数据量
					                pagesize: 10,
					              	//当前页码
					                currentPage: 1,
					                restaurants:[]
								},
						 goo_id:'' 
						}
					},
					methods: {
						 submitUpload() {
						        this.$refs.upload.submit();
						      },
						      handleAvatarSuccess(res, file) {
						        
						    	  var iosnn=this;
									//post提交数据
									axios.post("/glist",
										//参数转换
										Qs.stringify(this.ruleForm, {
											arrayFormat: 'brackets'
										})		
									).then(function(v) {
										iosnn.tableData = v.data.list;
										iosnn.ruleForm.totalCount = v.data.total;
										//iosnn.tableData = v.data;
										console.info(iosnn.tableData);
									}).catch(function(e) {
										alert("出错了"+e);
									});
						    	  
						        },
						showDialog(){
					    	  this.centerDialogVisible= true;
					      },
					      moreQuery(){
					    	  this.centerDialogVisible2= true;
					      },
					      delgood:function(goo_id){
								this.goo_id= goo_id;
						    	this.dialogVisible = true;
									
						      },
						      update: function(i) {
						    	  axios.post("/delgood",
						           			//参数转换
						           			Qs.stringify({'goo_id':i},{arrayFormat: 'brackets'})
						           			//ajax请求成功的回调函数
						           			).then(function(v){
							           			window.location.replace("/glist");
							           			console.log("回调成功，获取了服务器端返回的值v");
							           	}).catch(function(e){
							           		alert("出错了"+e);
							           	});
								},
								//编辑
					      editgood(id){
					    	    this.centerDialogVisible4 = true;
								this.FrameSrc="/goodEditor?id="+id;
						}, 
					    //从服务器读取数据
			                loadData: function(){  
			                	var iosnn=this;
			                	//post提交数据
								axios.post("/pagelist",
									//参数转换
									Qs.stringify(this.ruleForm, {
										arrayFormat: 'brackets'
									})		
								).then(function(v) {
									iosnn.tableData = v.data.list;
									iosnn.ruleForm.totalCount = v.data.total;
									 console.info(v.data); 
								}).catch(function(e) {
									alert("出错了"+e);
								});
			                },
		                handleSizeChange(val) {
		                	this.ruleForm.pagesize = val;
					        console.log( this.ruleForm.pagesize+'条');
					        this.ruleFormloadData();
					      },
					      handleCurrentChange(val) {
					    	  this.ruleForm.currentPage = val;
					        console.log(this.ruleForm.currentPage+'当前');
					        this.loadData();
					       
					      },

					      
						submitForm(formName) {
							//验证方法
							this.$refs[formName].validate((valid) => {
								if(valid) {
									this.loadData();
								} else {
									console.log('error submit!!');
									return false;
								}
							});
						},
						onSubmit(formName) {
							var $this = this;
					    	//验证方法
					        this.$refs[formName].validate((valid) => {
					          if (valid) {
					        	  this.centerDialogVisible2= false;
					        	  //post提交数据
					           	axios.post("/glist",
					           			//参数转换
					           			Qs.stringify(this.goodForm,{arrayFormat: 'brackets'})
					           			//ajax请求成功的回调函数
					           			).then(function(v){
					           				$this.tableData = v.data.list;
					           				$this.ruleForm.totalCount = v.data.total;
					           			console.log("回调成功，获取了服务器端返回的值v");
					           	}).catch(function(e){
					           		alert("出错了"+e);
					           	});
					        	  
					        	  
					          } else {
					            console.log('error submit!!');
					          }
					        });
					      }
						
					},
					mounted() {
						var iosnn=this;
						//post提交数据
						axios.post("/glist",
							//参数转换
							Qs.stringify(this.ruleForm, {
								arrayFormat: 'brackets'
							})		
						).then(function(v) {
							iosnn.tableData = v.data.list;
							iosnn.ruleForm.totalCount = v.data.total;
							console.info(iosnn.tableData);
						}).catch(function(e) {
							alert("出错了"+e);
						});
					}
					
				});
			</script>

					<!-- </div> -->
				</div>
			</div>
		</div>
	</div>
</body>


</html>